<template>
    <Header></Header>
       <!-- 导航区 -->
    <div class="navigate">
        <RouterLink to="/home">首页</RouterLink>
        <RouterLink :to="{name:'zhuye'}">首页名字跳转</RouterLink>
        <RouterLink to="/news">新闻</RouterLink>
        <RouterLink to="/about">关于</RouterLink>
        <RouterLink :to="{path:'/about'}">关于测试2</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
        <RouterView></RouterView>
    </div>
</template>

<script lang="ts" setup>
import { RouterView, RouterLink } from 'vue-router'
import Header from '@/components/Header.vue'
// 这里可以添加你的脚本逻辑
</script>

<style lang="scss" scoped>


.navigate {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;

    a {
        text-decoration: none;
        color: #333;
        padding: 5px 10px;
        border-radius: 3px;
        transition: background-color 0.3s;

        &:hover {
            background-color: #ddd;
        }
    }
}

.main-content {
    padding: 20px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 200px;
}
</style>
